<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../IconFont/iconfont.css"/>
    <style>
      .icon-ul {
        list-style-type: none;
      }
      
      .icon-ul > li::before {
        font-family: iconfont;
        content: '\e602';
      }
      
      .img-ul1 {
        list-style-image: url("../static/star.svg");
      }
      
      .img-ul2 {
        list-style-type: none;
      }
      
      .img-ul2 > li::before {
        font-family: iconfont;
        content: '\e602';
      }
      
      .img-ul3 {
        list-style-type: none;
      }
      
      .img-ul3 > li {
        padding-left: 2rem;
        background-image: url("../static/star.svg");
        background-position: 6px 0px;
        background-size: 20px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <!--列表默认样式-->
    <div>
      <h2>无序列表</h2>
      <ul>
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      
      <h2>有序列表</h2>
      <ol>
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ol>
      
      <h2>定义列表</h2>
      <dl>
        <dt>哈哈哈哈哈dt</dt>
        <dd>嘻嘻嘻嘻嘻dd</dd>
        <dt>呵呵呵呵呵dt</dt>
        <dd>嘿嘿嘿嘿嘿dd</dd>
      </dl>
    </div>
    
    <!--list-style-type属性设置无序列表和有序列表的符号-->
    <div style="display: flex">
      <ul style="list-style-type: none">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: disc">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: circle">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: square">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: decimal">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: georgian">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: trad-chinese-informal">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: kannada">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: '---'">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul class="icon-ul">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
    </div>
    
    <!--list-style-position属性设置无序列表和有序列表的符号显示在列表内还是外，其属性值可为列表外outside或列表内inside-->
    <div style="display: flex">
      <ul style="list-style-type: upper-latin;list-style-position: outside">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      <ul style="list-style-type: upper-latin;list-style-position: inside">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
    </div>
    
    <!--list-style-image属性设置无序列表和有序列表的符号为自定义图片，而不是简单的方块或圆形-->
    <div style="display: flex;justify-content: center">
      <ul class="img-ul1">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
    </div>
    <!--通过list-style-image设置的自定义图片无法控制大小，所以一般不使用list-style-image属性，而直接将无序列表和有序列表的符号设置为图标或调整背景图-->
    <div style="display: flex">
      <ul class="img-ul2">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
      
      <ul class="img-ul3">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ul>
    </div>
    
    <!--列表中的计数是灵活的，start设置计数开始值、reversed将反转计数列表、value指定`<li>`标签的计数数值-->
    <div style="display: flex">
      <ol start="4">
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ol>
      
      <ol reversed>
        <li>哈哈哈哈哈</li>
        <li>嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ol>
      
      <ol>
        <li value="4">哈哈哈哈哈</li>
        <li value="2">嘻嘻嘻嘻嘻</li>
        <li>呵呵呵呵呵</li>
        <li>嘿嘿嘿嘿嘿</li>
      </ol>
    </div>
  </body>
</html>